<template>
	<div class="shop">
		<header :style="'background-image:url('+bg+')'">
			<div class="top">
				<a href="javascript:;" class="shop-header-navBtn_ON8WT_0" @click='back'>
					<svg>
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left"></use>
					</svg>
				</a>
			</div>
			<div class="middle">
				<img :src="logo" alt="" />
				<div class="content">
					<div class="name">{{name}}</div>
					<div class="intro">
						<span>商家配送 /</span>
						<span>{{time}}分钟送达 /</span>
						<span>{{fee}}</span>
					</div>
					<p>
						<span>公告：</span>
						<span>{{info}}</span>
					</p>
				</div>
				<svg class="shop-header-detailIcon_1IXZI_0">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
				</svg>
			</div>
			<div class="bottom">
				<div>
					<span :style="'background:#'+color">{{icon}}</span>
					<span>{{description}}</span>
				</div>
				<div>{{activity}}个活动</div>
			</div>
		</header>
		<nav>
			<div class="one tap" @click="switchPage(1)">
				<span>商品</span>
			</div>
			<div class="two" @click="switchPage(2)">
				<span>评价</span>
			</div>
		</nav>
		<main>
			<div class="allgoods show">
				<ul class="tabb" >
					<li v-for='(item,index) in list' key='index' :class="{'select':index==0}" @click="clickTag(index)">
						<img v-if="item.icon_url&&item.icon_url.substr(-3)=='peg'" :src="'https://fuss10.elemecdn.com/'+item.icon_url.substr(0,1)+item.icon_url.substr(1,2)+item.icon_url.substr(3)+'.jpeg?imageMogr/format/webp/thumbnail/18x/'" alt="" />
						<img v-else-if="item.icon_url&&item.icon_url.substr(-3)=='png'" :src="'https://fuss10.elemecdn.com/'+item.icon_url.substr(0,1)+item.icon_url.substr(1,2)+item.icon_url.substr(3)+'.png?imageMogr/format/webp/thumbnail/18x/'" alt="" />
						<span>{{item.name}}</span>
						<span class="currentcount">0</span>
					</li>
				</ul>
				<div class="goodslist">
					<dl v-for='(item,index) in list' key='index'>
						<dt>
							<div class="type">{{ item.name }}</div>
							<div v-if='item.description' class="txt">{{ item.description }}</div>
							<div class="icon"></div>
						</dt>
						<dd v-for='(val,i) in item.foods'>
							<span class="pic">
								<img v-if="val.image_path&&val.image_path.substr(-3) == 'png'" :src="'https://fuss10.elemecdn.com/'+ val.image_path.substr(0,1) + '/' + val.image_path.substr(1,2) + '/' + val.image_path.substr(3) +'.png?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/'" alt="">
				                <img v-else-if="val.image_path&&val.image_path.substr(-3) == 'peg'" :src="'https://fuss10.elemecdn.com/'+ val.image_path.substr(0,1) + '/' + val.image_path.substr(1,2) + '/' + val.image_path.substr(3) +'.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/'" alt="">
							</span>
							<section>
								<p class="goods">{{val.name}}<span></span></p>
								<p class="fooddes">
									{{val.description}}
								</p>
								<p class="des">
									<span class="num">{{val.tips}}</span>
								</p>
								<p v-if='val.activity' class="activity">
									<span>
									{{val.activity.image_text}}
								</span>
								</p>
								<strong>
									<span class="price">{{ val.specfoods[0].price }}</span>
								</strong>
								<div>
									<span class="minus-count" @click='minus({index,i})'>
									<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use></svg>
									</span>
									<span class="count" > 
									0
									</span>
									<span class="select-size" v-if='val.specifications[0]' @click='addlist'>
									选规格
									</span>
									<span class="add-count" v-else @click='add({index,i})'>
									<svg>
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
									</svg>
								</span>
								</div>
							</section>
							<div class="size" v-if='val.specifications[0]'>
								<div>
									<h1>{{val.name}}</h1>
									<div class="taste">
										<h2>规格</h2>
										<a href="" class="now">原味</a>
										<a href="">朱古力</a>
									</div>
									<div class="t-price">
										<p>
											<span>￥</span>
											<span>11</span>
										</p>
										<a href="" class="add_cart">加入购物车</a>
									</div>
									<div class="close" @click='close'></div>
								</div>
							</div>
						</dd>
					</dl>
					<div class="black"></div>
				</div>
			</div>
			<div class="comment ">
				<section class="container">
					<div class="grade">
						<strong>{{rating}}</strong>
						<p>综合评价</p>
						<div>
							高于周围商家{{(compare_rating*100).toFixed(1)}}%
						</div>
					</div>
					<div class="star-rate">
						<div class="quality">
							<span>服务态度</span>
							<span>
								<div class="star">
									<div class="front" :style="'width:'+service_score/5*100+'%'">
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
									</div>
									<div class="back">
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
									</div>
								</div>
								<span>{{service_score}}</span>
							</span>
						</div>
						<div class="quality">
							<span>菜品评价</span>
							<span>
								<div class="star">
									<div class="front" :style="'width:'+food_score/5*100+'%'">
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
									</div>
									<div class="back">
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
										<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
									</div>
								</div>
								<span>{{food_score}}</span>
							</span>
						</div>
						<div class="quality">
							<span>送达时间</span>
							<span style="font-size: 30px;">{{time}}分钟</span>
						</div>
					</div>
				</section>
				<section class="rate-detail">
					<ul class="tags" @click='check'>
						<li v-for="(t,i) in tag" :class="{'current':i==0,'bad':t.name=='不满意'}"><span>{{t.name}}</span>({{t.count}})</li>
					</ul>
					<ul class="comments" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
						<li v-for="u in comments">
							<small>{{u.rated_at}}</small>
							<img class="users" src="https://fuss10.elemecdn.com/f/2e/20a4300d40b97e98a5889591fb1f2jpeg.jpeg?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/" />
							<div class="context">
								<h3>{{u.username}}</h3>
								<div class="star">
									<div class="front" :style="'width:'+u.rating_star/5*100+'%'">
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
									</div>
									<div class="back">
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
										<svg>
											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
										</svg>
									</div>
								</div>
								<span>
									{{u.time_spent_desc}}
								</span>
								<div class="diss">
									{{u.rating_text}}
								</div>
								<div class="reply" v-if="u.reply_text">
									{{u.reply_text}}
								</div>
								<ul class="pics">
									<li v-for='pic in u.item_ratings'>
										<img v-if="pic.image_hash&pic.image_hash.substr(-3) == 'png'" :src="'https://fuss10.elemecdn.com/'+pic.image_hash.substr(0,1)+pic.image_hash.substr(1,2)+pic.image_hash.substr(3)+'.png?imageMogr/format/webp/thumbnail/!142x142r/gravity/Center/crop/142x142/'" alt="">
										<img v-else-if="pic.image_hash&&pic.image_hash.substr(-3) == 'peg'" :src="'https://fuss10.elemecdn.com/'+pic.image_hash.substr(0,1)+pic.image_hash.substr(1,2)+pic.image_hash.substr(3)+'.jpeg?imageMogr/format/webp/thumbnail/!142x142r/gravity/Center/crop/142x142/'" alt="">
									</li>
								</ul>
								<ul class="bought">
									<li v-for='pic in u.item_ratings'>{{pic.food_name}}</li>
								</ul>
							</div>
						</li>
					</ul>
				</section>
			</div>
		</main>
		<footer>
			<div class="cart">
				<span class="shopping-cart empty"></span>
				<span class="after">0</span>
				<div>
					<p class="total">￥0</p>
					<p class="fee">{{fee}}</p>
				</div>
				<a v-if='minimum_order_amount' href="" class="empty">￥{{minimum_order_amount}}起送</a>
				<a v-else href="" class="empty">去结算</a>
			</div>
		</footer>
		<div class="background hide"></div>
		<div class="list hide">
			<section>此处为原价，[去结算]享优惠哦</section>
			<div class="list-title">
				<span>购物车</span>
				<a href="">
					<svg>
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove"></use>
					</svg>
					<span>清空</span>
				</a>
			</div>
			<div class="shopping-list">
				<ul>
					<li>
						<span class="foodname">奥尔良鸡巴饭</span>
						<span class="price">30</span>
						<span class="number">
							<span class="minus-count">
								<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use></svg>
							</span>
						<span class="count">
								1
							</span>
						<span class="add-count">
								<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use></svg>
							</span>
						</span>
					</li>
				</ul>
				<!--<div class="package">
					<span></span>
					<span></span>
				</div>-->
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
	export default {
		name: 'Shop',
		data() {
			return {
				page: 1,
			}
		},
		computed: {
			...mapState(['logo', 'fee', 'time', 'info', 'name', 'bg', 'description', 'icon', 'color', 'activity', 'list', 'minimum_order_amount', 'rating', 'food_score', 'service_score', 'comments', 'tag', 'compare_rating'])
		},
		methods: mapMutations({
			switchPage: 'SWITCHPAGE',
			clickTag: 'CLICKTAG',
			back: 'BACK',
			check: 'CHECK',
			addlist: 'ADDLIST',
			close: 'CLOSE',
			loadMore:'LOADMORE',
			add:'ADD',
			minus:'MINUS',
		}),
		mounted: function() {
			var id = this.$route.query.id;
			this.$store.dispatch('ALLDATA',id);
			this.$store.dispatch('ALLACTIVITIES',id);
			this.$store.dispatch('ALLCOMMENTS',id);
			this.$store.dispatch('RATING',id);
			this.$store.dispatch('TAG',id);
			//楼梯效果
			var goodslist=$('.goodslist');
			var oDl=$('dl');
			var tabb=$('.tabb')
			goodslist.scroll(function(){
				oDl.each(function(index){	
					if($(this).position().top<=0&&$(this).position().top>-$(this).height()){	
						tabb.find('li').removeClass('select').eq(index).addClass('select');
					}
				})
			})
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import '../../static/hotcss/px2rem.scss';
	.shop {
		height: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	
	header,
	nav,
	main,
	footer {
		display: flex;
	}
	/*头部css*/
	
	header {
		position: relative;
		height: px2rem(145);
		flex-direction: column;
		background-size: cover;
		.top {
			.shop-header-navBtn_ON8WT_0 {
				display: block;
				position: relative;
				padding: px2rem(0) px2rem(11);
				padding-top: 10px;
				svg {
					width: px2rem(27);
					height: px2rem(27);
				}
			}
		}
		.middle {
			display: flex;
			img {
				width: px2rem(71);
				height: px2rem(71);
				border: 1px solid #fff;
				border-radius: px2rem(5);
				margin: 0 px2rem(11);
			}
			svg {
				fill: white;
				position: absolute;
				top: 50%;
				right: px2rem(5);
				height: px2rem(13.5);
				width: px2rem(27);
			}
			.content {
				width: px2rem(943/3);
				font-size: px2rem(13);
				color: #fff;
				.name {
					margin: 0;
					font-size: px2rem(19);
					line-height: 1.2em;
					font-weight: 700;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.intro {
					height: px2rem(82/3);
					line-height: px2rem(82/3);
					white-space: nowrap;
					font-size: px2rem(11.5);
				}
				p {
					height: px2rem(66/3);
					line-height: px2rem(66/3);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: px2rem(12);
				}
			}
		}
		.bottom {
			color: #FFFFFF;
			font-size: px2rem(32/3);
			padding: 0 px2rem(11);
			padding-top: px2rem(13);
			display: flex;
			justify-content: space-between;
			span {
				&:first-child {
					border-radius: .06rem;
					font-size: px2rem(32/3);
					margin-right: px2rem(16/3);
				}
			}
		}
	}
	/*导航css*/
	
	nav {
		height: px2rem(50);
		border-bottom: 1px solid #ddd;
		.tap {
			color: #3190e8;
			span {
				position: relative;
				&:after {
					content: "";
					position: absolute;
					bottom: -.16rem;
					left: -.066667rem;
					right: -.066667rem;
					height: 4.3px;
					background: #3190e8;
					border-radius: .04rem;
				}
			}
		}
		div {
			width: 50%;
			line-height: px2rem(50);
			text-align: center;
			font-size: px2rem(47/3);
			color: #666;
		}
	}
	/*主体css*/
	
	main {
		flex: 1;
		background-color: #eee;
		.tabb {
			overflow-y: auto;
			background-color: #f8f8f8;
			width: px2rem(281/3);
			li {
				position: relative;
				padding: px2rem(58/3) px2rem(25/3);
				font-size: px2rem(15);
				color: #666;
				border-bottom: 1px solid #ededed;
				img {
					width: px2rem(30/3);
					height: px2rem(40/3);
				}
				.currentcount {
					position: absolute;
					right: px2rem(10/3);
					top: px2rem(10/3);
					color: #fff;
					background-color: #ff461d;
					border-radius: px2rem(30/3);
					font-size: px2rem(32/3);
					font-weight: 700;
					text-align: center;
					min-width: px2rem(10/3);
					padding: 0 px2rem(13/3);
					display: none;
				}
			}
			.select {
				background-color: #fff;
				border-right-color: #fff;
				font-weight: bolder;
				&:after {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					width: px2rem(10/3);
					background-color: #3190e8;
				}
			}
		}
		.goodslist {
			flex: 1;
			overflow-y: auto;
			.black {
				display: none;
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0, 0, 0, .5);
				transition: opacity .3s ease-in-out;
				opacity: 0;
				z-index: 11;
			}
			.on {
				opacity: 1;
			}
			dl {
				width: 100%;
				dt {
					overflow: hidden;
					background-color: #f1f1f1;
					padding: px2rem(28/3) px2rem(33/3);
					position: relative;
					.type {
						float: left;
						margin-right: px2rem(16.5/3);
						font-weight: 700;
						font-size: px2rem(14);
						color: #666;
					}
					.txt {
						float: left;
						color: #999;
						font-size: px2rem(11);
						white-space: nowrap;
						overflow: hidden;
						line-height: px2rem(22);
						width: px2rem(600/3);
					}
					.icon {
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						width: px2rem(115/3);
						z-index: 2;
						background: #f1f1f1 url() 50% no-repeat;
						background-size: px2rem(115/9) auto;
					}
				}
				dd {
					position: relative;
					background-color: #fff;
					margin: 0;
					padding: px2rem(50/3) px2rem(33/3);
					margin-bottom: 1px;
					display: flex;
					min-height: px2rem(364/3);
					box-shadow: 15px 2px 0 0 #ddd;
					.pic {
						margin-right: 4%;
						width: px2rem(171/3);
						height: px2rem(171/3);
						display: block;
						img {
							width: 100%;
							border-radius: 3px;
						}
					}
					.size {
						display: none;
						position: fixed;
						top: 50%;
						left: 10%;
						right: 10%;
						transition: transform .3s ease-in-out, opacity .3s ease-in-out;
						transform: translate3d(0, -50%, 0) scale(.1);
						opacity: 0;
						overflow: auto;
						background-color: #fff;
						border-radius: .156667rem;
						z-index: 12;
						h1 {
							margin: 0;
							text-align: center;
							background-color: inherit;
							color: #333;
							font-size: px2rem(52/3);
							line-height: .6rem;
							padding: px2rem(41/3) px2rem(99/3);
							font-weight: 400;
						}
						.taste {
							max-height: 6.666667rem;
							overflow-y: auto;
							padding: 0 0 px2rem(66/3) px2rem(49/3);
							h2 {
								font-size: px2rem(46/3);
								color: #666;
								line-height: .533333rem;
								font-weight: 400;
							}
							a {
								display: inline-block;
								vertical-align: middle;
								white-space: nowrap;
								border: 1px solid #999;
								border-radius: .533333rem;
								margin: px2rem(21/3) px2rem(38/3) 0 0;
								padding: 0 px2rem(30/3);
								min-width: 1.333333rem;
								line-height: px2rem(77/3);
								height: px2rem(77/3);
								font-size: px2rem(41/3);
								text-decoration: none;
								text-align: center;
								color: #666;
							}
							.now {
								font-weight: 700;
								color: #3199e8;
								border-color: #3199e8;
								background-color: #f6fbff;
							}
						}
						.t-price {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: px2rem(41/3) px2rem(49/3);
							border-top: 1px solid #eee;
							border-bottom: 1px solid #eee;
							background-color: #f9f9f9;
							p {
								font-size: px2rem(70/3);
								line-height: 1;
								color: #ff6000;
								font-weight: 700;
								span {
									&:first-child {
										position: relative;
										font-size: px2rem(30/3);
										top: -.04rem;
										margin-right: -px2rem(16/3);
										vertical-align: bottom;
									}
								}
							}
							.add_cart {
								font-size: px2rem(46/3);
								color: #fff;
								padding: 0 px2rem(41/3);
								text-align: center;
								line-height: px2rem(110/3);
								border-radius: .08rem;
								background-color: #3199e8;
								text-decoration: none;
							}
						}
						.close {
							display: block;
							position: absolute;
							top: px2rem(49/3);
							right: px2rem(49/3);
							width: px2rem(57/3);
							height: px2rem(57/3);
							background: url() no-repeat;
							background-size: cover;
						}
					}
					.move {
						transform: translate3d(0, -50%, 0) scale(1);
						opacity: 1;
					}
					section {
						padding-bottom: px2rem(82/3);
						position: relative;
						width: 80%;
						.goods {
							font-size: px2rem(48/3);
							font-weight: 700;
							line-height: 0.8;
							span {
								display: inline-block;
								vertical-align: middle;
								padding: px2rem(5/3) px2rem(8/3);
								line-height: 100%;
								text-align: center;
								border: 1px solid currentColor;
								color: #fff;
								font-size: px2rem(28/3);
								border-radius: .266667rem;
								color: rgb(236, 156, 104);
								float: right;
							}
						}
						.des {
							margin: px2rem(21/3) 0;
							color: #666;
							font-size: px2rem(36/3);
							line-height: 1.1;
							.good-rate {
								margin-left: px2rem(13/3);
							}
						}
						.fooddes {
							margin: px2rem(16/3) 0;
							font-size: px2rem(32/3);
							color: #999
						}
						.activity {
							font-size: px2rem(32/3);
							transform: scale(.8);
							transform-origin: left;
							color: #f07373;
							white-space: nowrap;
							span {
								border: 1px solid currentColor;
								padding: 0 px2rem(8/3);
							}
						}
						strong {
							.price {
								position: absolute;
								left: 0;
								bottom: 0;
								font-weight: 700;
								font-size: px2rem(52/3);
								line-height: px2rem(59/3);
								color: #f60;
								&:before {
									font-weight: 400;
									content: "\A5";
									font-size: px2rem(35/3);
									display: inline-block;
								}
							}
						}
						div {
							position: absolute;
							right: 0;
							bottom: px2rem(-5);
							.minus-count {
								display: none;
								svg {
									fill: #3190e8;
									width: px2rem(20);
									height: px2rem(20);
								}
							}
							.count {
								display: none;
								text-align: center;
								color: #666;
								font-size: px2rem(50/3);
								min-width: px2rem(20);
								max-width: px2rem(100);
								overflow: hidden;
							}
							.add-count {
								svg {
									fill: #3190e8;
									width: px2rem(20);
									height: px2rem(20);
								}
							}
							.select-size {
								display: inline-block;
								padding: px2rem(18/3);
								vertical-align: middle;
								color: #fff;
								background-color: #3199e8;
								text-decoration: none;
								font-size: px2rem(40/3);
								border-radius: px2rem(12);
								margin-top: px2rem(-25/3);
							}
						}
					}
				}
			}
		}
		.container {
			background-color: #fff;
			margin-bottom: px2rem(33/3);
			padding: px2rem(50/3);
			font-size: px2rem(42/3);
			display: flex;
			align-items: center;
			color: #666;
			.grade {
				padding-right: px2rem(50/3);
				border-right: 1px solid #ddd;
				text-align: center;
				line-height: 1.5;
				strong {
					font-size: px2rem(95/3);
					line-height: 1;
					font-weight: 400;
					color: #f60;
					display: block;
				}
				div {
					font-size: px2rem(32/3);
					color: #999;
				}
			}
			.star-rate {
				flex: 1;
				display: block;
				font-size: px2rem(45/3);
				line-height: 1;
				overflow: hidden;
				padding-left: px2rem(86/3);
				.quality {
					float: left;
					width: 80%;
					margin: px2rem(16/3) 0;
					span {
						&:last-child {
							padding-left: px2rem(33/3);
						}
					}
					.star {
						position: relative;
						overflow: hidden;
						display: inline-block;
						vertical-align: middle;
						.front {
							display: flex;
							position: absolute;
							top: 0;
							left: 0;
							overflow: hidden;
							svg {
								display: block;
								margin: 0 1px;
								flex: none;
								width: px2rem(33/3);
								height: px2rem(33/3);
								fill: #ffaa0c;
								;
							}
						}
						.back {
							display: flex;
							svg {
								display: block;
								margin: 0 1px;
								flex: none;
								width: px2rem(33/3);
								height: px2rem(33/3);
								fill: #ddd;
							}
						}
					}
					span {
						span {
							color: #f60;
							padding-left: px2rem(33/3);
						}
					}
				}
			}
		}
		.rate-detail {
			background-color: #fff;
			padding: px2rem(33/3) px2rem(36/3) 0;
			font-size: px2rem(42/3);
			flex: 1;
			overflow-y: auto;
			.tags {
				padding-bottom: px2rem(30/3);
				border-bottom: 1px solid #ddd;
				overflow: hidden;
				li {
					background-color: #fff;
					float: left;
					display: inline-block;
					padding: px2rem(24/3);
					margin: px2rem(8/3) px2rem(16/3);
					border-radius: px2rem(16/3);
					color: #6d7885;
					color: #6d7885;
					background-color: #ebf5ff;
				}
				.current {
					color: #fff;
					background-color: #3190e8;
				}
				.current.bad {
					color: #fff;
					background-color: #3190e8;
				}
				.bad {
					color: #aaa;
					background-color: #f5f5f5;
				}
			}
			.comments {
				li {
					border-bottom: 2px solid #ddd;
					position: relative;
					small {
						position: absolute;
						top: px2rem(72.5/3);
						right: 0;
						font-size: px2rem(40/3);
						color: #999;
					}
					.users {
						position: absolute;
						top: px2rem(65.5/3);
						left: 0;
						width: px2rem(99/3);
						height: px2rem(99/3);
						border-radius: 50%;
					}
					.context {
						padding: px2rem(58/3) 0 px2rem(58/3) px2rem(140/3);
						.diss {
							color: #333;
							font-size: px2rem(50/3);
							margin: px2rem(26/3) 0
						}
						.reply {
							position: relative;
							margin: px2rem(33/3) 0;
							padding: px2rem(33/3);
							background: #f3f3f3;
							border-radius: .106667rem;
							&:after {
								content: " ";
								position: absolute;
								bottom: 100%;
								left: .4rem;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 0 px2rem(26/3) px2rem(26/3);
								border-color: transparent transparent #f3f3f3;
							}
						}
						h3 {
							font-size: px2rem(45/3);
							margin-top: 0;
							margin-bottom: px2rem(16.5/3);
							color: #666;
							font-weight: 100;
						}
						span {
							font-size: px2rem(30/3);
							color: #999;
							vertical-align: middle;
						}
						.star {
							position: relative;
							overflow: hidden;
							display: inline-block;
							vertical-align: middle;
							padding: 0;
							.front {
								display: flex;
								position: absolute;
								top: 0;
								left: 0;
								overflow: hidden;
								width: 0;
								svg {
									display: block;
									margin: 0 1px;
									flex: none;
									width: px2rem(33/3);
									height: px2rem(33/3);
									fill: #ffaa0c;
									;
								}
							}
							.back {
								display: flex;
								svg {
									display: block;
									margin: 0 1px;
									flex: none;
									width: px2rem(33/3);
									height: px2rem(33/3);
									fill: #ddd;
								}
							}
						}
						.pics {
							li {
								display: inline-block;
								margin: px2rem(16.5/3);
								img {
									width: px2rem(235/3);
									height: px2rem(235/3);
								}
							}
						}
						.bought {
							li {
								display: inline-block;
								font-size: px2rem(34/3);
								color: #999;
								border: 2px solid #ddd;
								padding: px2rem(13/3) px2rem(33/3);
								margin: px2rem(11/3);
								border-radius: .08rem;
								max-width: px2rem(198/3);
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
		.comment {
			flex-direction: column;
			display: none;
			z-index: 13;
		}
		.allgoods {
			flex: 1;
			display: none;
		}
		.show {
			display: flex;
		}
	}
	/*底部css*/
	
	footer {
		height: px2rem(53);
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		padding-left: px2rem(88);
		background-color: #3d3d3f;
		z-index: 12;
		.cart {
			height: 100%;
			width: 100%;
			overflow: hidden;
			.shopping-cart {			
				position: absolute;
				left: px2rem(36/3);
				bottom: px2rem(36/3);
				width: px2rem(162/3);
				height: px2rem(162/3);
				box-sizing: border-box;
				border-radius: 100%;
				background-color: #3190e8;
				border: px2rem(13/3) solid #444;
				box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0, 0, 0, .1);
				will-change: transform;
				&:before {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background: url() 50% no-repeat;
					background-size: px2rem(75/3);
					content: '';
				}
			
			}
			.after {
					position: absolute;
					left: px2rem(151/3);
					top: px2rem(-39/3);
					line-height: 1;
					background-color: #ff461d;
					color: #fff;
					border-radius: .32rem;
					padding: px2rem(2) px2rem(16/3);
					content: '0';
					font-size: px2rem(30/3);
					display: none;
				}
			.shopping-cart.empty {
				background-image: radial-gradient(circle, #363636 px2rem(132/3), #444 0);
				&:before {
					background-image: url();
				}
			}
			div {
				padding-top: px2rem(7);
				float: left;
				color: #fff;
				.total {
					font-size: px2rem(18);
				}
				.fee {
					font-size: px2rem(11);
				}
			}
			a {
				float: right;
				color: #fff;
				font-size: px2rem(16);
				height: 100%;
				width: px2rem(347/3);
				background-color: #4cd964;
				text-align: center;
				text-decoration: none;
				font-weight: 700;
				line-height: px2rem(53);
			}
			.empty {
				background-color: #535356;
			}
		}
	}
	
	.background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: .4;
		transition: opacity .35s ease;
		z-index: 10;
		display: none;
	}
	
	.list {
		z-index: 11;
		position: fixed;
		bottom: px2rem(53);
		background: #FFFFFF;
		width: 100%;
		transform: translateZ(0);
		section {
			background-color: #fffad6;
			border-top: 1px solid #f9e8a3;
			opacity: .96;
			line-height: px2rem(66/3);
			font-size: px2rem(32/3);
			text-align: center;
			display: block;
		}
		.list-title {
			padding: 0 px2rem(41/3);
			border-bottom: 1px solid #ddd;
			background-color: #eceff1;
			color: #666;
			font-size: px2rem(50/3);
			line-height: px2rem(132/3);
			span {
				padding-left: px2rem(16/3);
				border-left: px2rem(11/3) solid #3190e8;
			}
			a {
				color: #666;
				text-decoration: none;
				float: right;
				padding-left: .4rem;
				background-size: .266667rem;
				font-size: px2rem(45/3);
				svg {
					width: px2rem(38/3);
					height: px2rem(43/3);
					fill: #ddd;
				}
				span {
					padding: 0;
					border: 0;
				}
			}
		}
		.shopping-list {
			ul {
				font-size: px2rem(50/3);
				li {
					border-bottom: 1px solid #eee;
					display: flex;
					align-items: center;
					padding: px2rem(24/3) px2rem(41/3) px2rem(24/3) 0;
					min-height: px2rem(181/3);
					margin-left: px2rem(41/3);
					color: #333;
					.foodname {
						flex: 5.5;
					}
					.price {
						flex: 2.5;
						color: #f60;
						text-align: right;
						white-space: nowrap;
						font-weight: 400;
						font-size: px2rem(56/3);
						&:before {
							content: "\A5";
							font-size: px2rem(30/3);
							color: currentColor
						}
					}
					.number {
						flex: 3;
						display: block;
						width: 0;
						text-align: right;
						.minus-count {
							svg {
								width: px2rem(55/3);
								height: px2rem(55/3);
								vertical-align: middle;
								fill: #3190e8;
							}
						}
						.count {
							text-align: center;
							color: #666;
							font-size: px2rem(50/3);
							min-width: px2rem(30);
							max-width: 2em;
							overflow: hidden;
							display: inline-block;
							vertical-align: middle;
						}
						.add-count {
							svg {
								width: px2rem(55/3);
								height: px2rem(55/3);
								vertical-align: middle;
								fill: #3190e8;
							}
						}
					}
				}
			}
		}
		.package {
			display: flex;
			align-items: center;
			padding: px2rem(24/3) px2rem(41/3) px2rem(24/3) 0;
			min-height: px2rem(181/3);
			margin-left: px2rem(41/3);
			border-top: 1px solid #eee;
			font-size: px2rem(50/3);
			color: #333;
			span {
				&:first-child {
					flex: 5.5;
				}
				&:last-child {
					flex: 2.5;
					color: #f60;
					white-space: nowrap;
					font-weight: 400;
					display: block;
				}
			}
		}
	}
	
	.list.hide {
		transition: all .35s ease;
		transform: translate3d(0, 100%, 0);
	}
</style>